<script setup lang="ts">
  import { ref } from 'vue';
  import type { TabsProps } from 'ant-design-vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { RouteParams, useRoute } from 'vue-router';
  import FieldManage from '@/views/resource/fieldManage/index.vue';
  import FieldRelation from '@/views/resource/fieldRelation/index.vue';
  import Icon from '@/components/Icon/Icon.vue';

  const params: RouteParams = useRoute().params;
  const mode = ref<TabsProps['tabPosition']>('left');
  const activeKey = ref('source');
  function sourceBeforeFetch(values) {
    values.fieldSourceId = params.sourceId;
  }
  function targetBeforeFetch(values) {
    values.fieldSourceId = params.targetId;
  }
  function relationBeforeFetch(values) {
    values.targetId = params.targetId;
    values.sourceId = params.sourceId;
  }
</script>

<template>
  <Tabs v-model:activeKey="activeKey" :tab-position="mode" tabBarStyle="background-color: #fff">
    <TabPane key="source" style="padding: 0">
      <template #tab>
        <span>
          <Icon icon="clarity:resource-pool-line" />
          {{ params.sourceName }}
        </span>
      </template>
      <FieldManage :before-fetch="sourceBeforeFetch" />
    </TabPane>
    <TabPane key="target" style="padding: 0">
      <template #tab>
        <span>
          <Icon icon="game-icons:targeting" />
          {{ params.targetName }}
        </span>
      </template>
      <FieldManage :before-fetch="targetBeforeFetch" />
    </TabPane>
    <TabPane key="relation" style="padding: 0">
      <template #tab>
        <span>
          <Icon icon="tabler:circles-relation" />
          映射关系
        </span>
      </template>
      <FieldRelation :before-fetch="relationBeforeFetch" />
    </TabPane>
  </Tabs>
</template>
